<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			td{
				vertical-align: text-top !important;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<script src="jquery.3.1.1.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-hover table-bordered text-center">
				<tr class="btn-primary" disabled>
					<td>商品名称</td>
					<td><input type="checkbox" id="qx"/>全选</td>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>苹果</td>
					<td><input type="checkbox" class="fx"/></td>
					<td>￥<span>13</span></td>
					<td>
						<button class="jian btn btn-default">-</button>
						<input type="text" value="1" style="width: 37px;"/>
						<button class="jia  btn btn-default">+</button>
					</td>
					<td>￥<span class="cc">13</span></td>
					<td><button class="del btn btn-default btn-success">删除</button></td>
				</tr>
					<tr>
					<td>星星</td>
					<td><input type="checkbox" class="fx"/></td>
					<td>￥<span>19</span></td>
					<td>
						<button class="jian btn btn-default">-</button>
						<input type="text" value="1" style="width: 37px;"/>
						<button class="jia  btn btn-default">+</button>
					</td>
					<td>￥<span class="cc">19</span></td>
					<td><button class="del btn btn-default btn-success">删除</button></td>
				</tr>
					<tr>
						
					<td>太阳</td>
					<td><input type="checkbox" class="fx"/></td>
					<td>￥<span>233</span></td>
					<td>
						<button class="jian btn btn-default">-</button>
						<input type="text" value="1" style="width: 37px;"/>
						<button class="jia  btn btn-default">+</button>
					</td>
					<td>￥<span class="cc">233</span></td>
					<td><button class="del btn btn-default btn-success">删除</button></td>
				</tr>
					<tr>
					<td>油量</td>
					<td><input type="checkbox" class="fx"/></td>
					<td>￥<span>15</span></td>
					<td>
						<button class="jian btn btn-default">-</button>
						<input type="text" value="1" style="width: 37px;"/>
						<button class="jia  btn btn-default">+</button>
					</td>
					<td>￥<span class="cc">15</span></td>
					<td><button class="del btn btn-default btn-success">删除</button></td>
				</tr>
					<tr>
					<td>大地</td>
					<td><input type="checkbox" class="fx"/></td>
					<td>￥<span>366</span></td>
					<td>
						<button class="jian btn btn-default">-</button>
						<input type="text" value="1" style="width: 37px;"/>
						<button class="jia  btn btn-default">+</button>
					</td>
					<td>￥<span class="cc">366</span></td>
					<td><button class="del btn btn-default btn-success">删除</button></td>
				</tr>	<tr>
					<td>骚年</td>
					<td><input type="checkbox" class="fx"/></td>
					<td>￥<span>10</span></td>
					<td>
						<button class="jian btn btn-default">-</button>
						<input type="text" value="1" style="width: 37px;"/>
						<button class="jia  btn btn-default">+</button>
					</td>
					<td>￥<span class="cc">10</span></td>
					<td><button class="del btn btn-default btn-success">删除</button></td>
				</tr>
				<tr>
					<td>总价格</td>
					<td colspan="4"><span id="num">0</span>元</td>
					<td><button id="quan" class="btn btn-default btn-danger">全部删除</button></td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//全选
		$("#qx").click(function(){
		$(".fx").prop("checked",this.checked)
		});
		//加
		$(".jia").click(function(){
			var inp=$(this).prev().val(); //获取到了数量
			inp++;
			$(this).prev().val(inp);
			//小计
			var dan=$(this).parent().prev().children().html();//获取到了单价
			$(this).parent().next().children().html(inp*dan);
			total();
		});
		$(".jian").click(function(){
			var inp=$(this).next().val();//获取到数量
			inp--;
			if(inp==0){
				inp=1;
				alert("商品数量不能小于1");
			}
			$(this).next().val(inp);
			var dan=$(this).parent().prev().children().html();
			$(this).parent().next().children().html(inp*dan);
			total();
			
		});
		//单行删除
		$(".del").click(function(){
			$(this).parent().parent().remove();
			total();
			
		});
		//全部删除
		$("#quan").click(function(){
			$("tr:gt(0)").not($("tr:last")).remove();
			total();
			
		});
		//总价
		function total(){
			var index=0;
			$(".cc").each(function(){
				index+=parseInt($(this).html());
			})
			$("#num").html(index);
		}
			total();
		
	</script>
</html>
